@mysugr/spring-forms

Spring Forms

Form typography

The headings are different than in on the landing page typography. (Zeplin, Dropbox)

<div class="ms-form">
  <h2>Angebot freischalten</h2>
  <p>mySugr kooperiert mit Versicherungen, die deine Kosten übernehmen.</p>
</div>

Select

Here's an example of a new select component styled without Bootstrap. (Zeplin, Dropbox)

<div class="ms-form">
  <div class="ms-form-item">
    <label for="edit-insurance" class="control-label">Deine Versicherung:</label>
    <div class="select-wrapper">
      <select data-drupal-selector="edit-insurance" id="edit-insurance" name="insurance">
        <option disabled selected value>Versicherung</option>
        <option value="gothaer">Gothaer</option>
        <option value="barmenia">Barmenia</option>
        <option value="vkb">VKB (Versicherungskammer Bayern)</option>
        <option value="ukv">UKV (Union Krankenversicherung)</option>
        <option value="other">Andere Versicherung</option>
      </select>
    </div>
  </div>
</div>

Form Buttons

Form buttons can be different than buttons on the main page (can they really? 🤔). (Zeplin, Dropbox)

<div class="ms-form">
  <div class="ms-form-item">
    <button type="submit" class="ms-btn" id="edit-submit" name="op" value="Los geht's">
      Los geht´s
    </button>
    <div class="small-print">
      Sieh <u><a href="/de/unterstuetzte-smartphones">hier</a></u> ob dein Smartphone mit dem Accu-Chek<sup>®</sup> Guide kompatibel ist.
    </small>
  </div>
</div>

Complete form

<div class="ms-form">

  <h2>Angebot freischalten</h2>
  <p>mySugr kooperiert mit Versicherungen, die deine Kosten übernehmen.</p>

  <div class="ms-form-item">
    <label for="edit-insurance" class="control-label">Deine Versicherung:</label>
    <div class="select-wrapper">
      <select data-drupal-selector="edit-insurance" id="edit-insurance" name="insurance">
        <option disabled selected value>Versicherung</option>
        <option value="gothaer">Gothaer</option>
        <option value="barmenia">Barmenia</option>
        <option value="vkb">VKB (Versicherungskammer Bayern)</option>
        <option value="ukv">UKV (Union Krankenversicherung)</option>
        <option value="other">Andere Versicherung</option>
      </select>
    </div>
  </div>

  <div class="ms-form-item">
    <button type="submit" class="ms-btn" id="edit-submit" name="op" value="Los geht's">
      Los geht´s
    </button>
    <div class="small-print">
      Sieh <u><a href="/de/unterstuetzte-smartphones">hier</a></u> ob dein Smartphone mit dem Accu-Chek<sup>®</sup> Guide kompatibel ist.
    </small>
  </div>
</div>

Old stuff

Rewrite, as this was very rough style scraping.

Select (old)

<div class="form-item-wrapper col-sm-12"><div class="form-item js-form-item form-type-select js-form-type-select form-item-insurance js-form-item-insurance form-group">
      <label for="edit-insurance" class="control-label">Versicherung</label>
  <div class="select-wrapper"><select data-drupal-selector="edit-insurance" class="form-select form-control" id="edit-insurance" name="insurance"><option value="empty">----</option><option value="gothaer">Gothaer</option><option value="barmenia">Barmenia</option><option value="vkb">VKB (Versicherungskammer Bayern)</option><option value="ukv">UKV (Union Krankenversicherung)</option><option value="other">Andere Versicherung</option></select></div>
  </div>
</div>

Text input

<div class="form-item-wrapper form-item-wrapper--insurance-code col-sm-12"><div class="form-item js-form-item form-type-textfield js-form-type-textfield form-item-insurance-code js-form-item-insurance-code form-group" style="">
      <label for="edit-insurance-code" class="control-label">Versicherungsnummer</label>
  <input data-drupal-selector="edit-insurance-code" class="form-text form-control" type="text" id="edit-insurance-code" name="insurance_code" value="" size="20" maxlength="12" placeholder="KK-1234-1234" data-drupal-states="{&quot;visible&quot;:{&quot;:input[name=\u0022insurance\u0022]&quot;:[{&quot;value&quot;:&quot;vkb&quot;},{&quot;value&quot;:&quot;ukv&quot;}]}}">
  </div>
</div>

Error state:

<div class="form-item-wrapper--error form-item-wrapper-insurance_code col-sm-12"><div class="form-item js-form-item form-type-textfield js-form-type-textfield form-item-insurance-code js-form-item-insurance-code form-group error has-error">
      <label for="edit-insurance-code" class="control-label">Versicherungsnummer</label>

  <input data-drupal-selector="edit-insurance-code" class="form-text error form-control" type="text" id="edit-insurance-code" name="insurance_code" value="fg4665324gda" size="20" maxlength="12" placeholder="KK-1234-1234" aria-invalid="true" data-drupal-states="{&quot;visible&quot;:{&quot;:input[name=\u0022insurance\u0022]&quot;:[{&quot;value&quot;:&quot;vkb&quot;},{&quot;value&quot;:&quot;ukv&quot;}]}}">

  </div>
<div class="error-message">Ungültige Versicherungsnummer</div></div>

Submit button

<button class="btn btn-success button js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Los geht's">Los geht's</button>